<template>
  <n-layout has-sider inverted class="aside-menu" position="absolute">
    <AsideMenu />
    <n-layout>
      <n-layout-header>
        <Header />
      </n-layout-header>
      <n-layout-content style="padding-top: 10px; padding-left: 20px; padding-right: 10px">
        <!-- <router-view></router-view> -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>



<script setup>
import AsideMenu from "../../components/menu/AsideMenu.vue";
import Header from "../../components/header/Header.vue";
</script>

<style scoped>
.n-layout-header {
  height: 64px;
}

.n-layout {
  background-color: #f5f7f9;
}

.aside-menu {
  background-color: #001428;
}


.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>